<template>
  <div>
    <i class="el-icon-full-screen" style="z-index: 999999;position: absolute;right: 0;margin: 8px;" @click="toggleFullScreen"></i>
    <el-carousel :height="height">
      <el-carousel-item v-for="(img, key) in carousel" :key="key">
        <el-image
          style="width: 100%; height: 100%"
          :src="img"
          fit="contain"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>

import carousel1 from '../assets/carousel/1.jpg'
import carousel2 from '../assets/carousel/2.jpg'
import carousel3 from '../assets/carousel/3.jpg'

export default {
  data() {
    return {
      images: {
        1: [carousel1, carousel2, carousel3],
        2: [carousel2, carousel2, carousel2],
        3: [carousel3, carousel3, carousel3],
        4: [carousel1, carousel2, carousel3, carousel3, carousel3],
      }
    };
  },
  computed: {
    height() {
      return window.innerHeight + 'px'
    },
    carousel() {
      return this.images[this.$route.params.type];
    }
  },
  methods: {
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        // 进入全屏
        document.documentElement.requestFullscreen();
      } else {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen(); // 标准化
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen(); // WebKit浏览器
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen(); // Firefox
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen(); // IE/Edge
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
